<template>
    <div class="enter-view">

      <div class="header">
        <div class="nav-bar-left-logo">
          <img src="../../assets/img/login/img_logo.png">
        </div>
      </div>

      <div class="content">

        <div class="box-view">
          <div class="content-view" v-if="step == 1">



            <div class="title">
              <span>填写基本信息</span>
              <span class="red" v-if="datas.hospital_status == 1">(资质待完善)</span>
              <span class="red" v-else-if="datas.hospital_status == 2">(资质审核中)</span>
              <span class="red" v-else-if="datas.hospital_status == 4">(审核不通过)</span>
              <a class="backTxt" @click="backClick">返回前页</a>
            </div>

            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
              <el-form-item label="诊所名称" prop="hospital_name">
                <el-input v-model="ruleForm.hospital_name" placeholder="请输入诊所名称"></el-input>
              </el-form-item>
              <el-form-item label="诊所地址" prop="location">
                <el-cascader
                  ref="cascaderAddr"
                  v-model="ruleForm.location"
                  :options="options"
                  @change="handleChange"></el-cascader>
              </el-form-item>
              <el-form-item label="详细地址" prop="address">
                <el-input v-model="ruleForm.address" placeholder="请输入详细地址"></el-input>
              </el-form-item>
              <el-form-item label="注册人姓名" prop="register_name">
                <el-input v-model="ruleForm.register_name" placeholder="请输入注册人姓名"></el-input>
              </el-form-item>
              <el-form-item label="联系手机号" prop="register_mobile">
                <el-input v-model="ruleForm.register_mobile" placeholder="请输入联系手机号"></el-input>
              </el-form-item>
            </el-form>

            <div class="content-item">
              <el-button type="primary" @click="firstConfirm">确定</el-button>
            </div>

          </div>

          <div class="content-view" v-else>

            <div class="title">
              <span>资质信息</span>
              <span class="red" v-if="datas.hospital_status == 1">(资质待完善)</span>
              <span class="red" v-else-if="datas.hospital_status == 2">(资质审核中)</span>
              <span class="red" v-else-if="datas.hospital_status == 4">(审核不通过)</span>
              <a class="backTxt" @click="stepBack">返回上一步</a>
            </div>

            <div class="content-item">
              <p>营业执照</p>
              <el-upload
                class="avatar-uploader"
                :action="domain"
                :data="qiniuToken"
                :show-file-list="false"
                :on-success="(res, file)=>{handleAvatarSuccess(res, file,1)}"
                :before-upload="beforeAvatarUpload">
                <img v-if="ruleForm.business_license" :src="ruleForm.business_license" class="avatar">
                <div class="avatar" v-else>
                  <div><i class="el-icon-plus avatar-uploader-icon"></i></div>
                  <div><span>上传图片</span></div>
                </div>
              </el-upload>
            </div>

            <div class="content-item">
              <p>身份证</p>
              <el-upload
                class="avatar-uploader"
                :action="domain"
                :data="qiniuToken"
                :show-file-list="false"
                :on-success="(res, file)=>{handleAvatarSuccess(res, file,2)}"
                :before-upload="beforeAvatarUpload">
                <img v-if="ruleForm.id_card" :src="ruleForm.id_card" class="avatar">
                <div class="avatar" v-else>
                  <div><i class="el-icon-plus avatar-uploader-icon"></i></div>
                  <div><span>上传图片</span></div>
                </div>
              </el-upload>

              <el-upload
                class="avatar-uploader"
                :action="domain"
                :data="qiniuToken"
                :show-file-list="false"
                :on-success="(res, file)=>{handleAvatarSuccess(res, file,3)}"
                :before-upload="beforeAvatarUpload">
                <img v-if="ruleForm.id_card_reverse" :src="ruleForm.id_card_reverse" class="avatar">
                <div class="avatar" v-else>
                  <div><i class="el-icon-plus avatar-uploader-icon"></i></div>
                  <div><span>上传图片</span></div>
                </div>
              </el-upload>
            </div>

            <div class="content-item">
              <el-button type="primary" @click="confirmClick">确定</el-button>
            </div>

          </div>
        </div>

      </div>

    </div>
</template>

<script>
  import {enterHospital,getRegisterInfo} from "../../api/clinicManagement";
  import {getQiniu} from "../../api/common";
    import area from "../../utils/area";

    export default {
        name: "enter",
        data:function () {
            return{
                options:[],
                value:[],
                datas:{},
                ruleForm:{
                    id_card:'',
                    id_card1:'',
                    hospital_name:'',
                    province_id:0,
                    province_name:'',
                    city_id:0,
                    city_name:'',
                    district_id:0,
                    district_name:'',
                    address:'',
                    business_license:'',
                    location:[],
                    register_name:'',
                    register_mobile:'',
                    id_card_reverse:'',
                },
                step:1,

                domain: "http://upload.qiniu.com/", // 七牛云的上传地址
                qiniuToken: {}, //上传到七牛的token
                imageUrl:'',
                rules: {
                    hospital_name: [
                        { required: true, message: '请输入诊所名称', trigger: 'blur' },
                    ],
                    location: [
                        { required: true, message: '请选择地址', trigger: 'change' }
                    ],
                    address: [
                        { required: true, message: '请输入诊所详细地址', trigger: 'blur' }
                    ],
                    register_name: [
                        { required: true, message: '请输入注册人', trigger: 'blur' },
                    ],
                    register_mobile: [
                        { required: true, message: '请输入联系电话', trigger: 'blur' },
                        { pattern: /^1[3456789]\d{9}$/, message: '请输入正确手机号' }
                    ],
                },
            }
        },
        mounted:function(){
            this.options = area.citys;
            this.getData();
        },
        methods:{
            getData:function(){
                getRegisterInfo().then((res)=>{
                    if (res.code == 200){
                        this.datas = res.data;
                        this.ruleForm.hospital_name = this.datas.hospital_name
                        this.ruleForm.province_name = this.datas.province_name
                        this.ruleForm.address = this.datas.address
                        this.ruleForm.city_name = this.datas.city_name
                        this.ruleForm.district_name = this.datas.district_name
                        this.ruleForm.register_name = this.datas.register_name
                        this.ruleForm.register_mobile = this.datas.register_mobile
                        this.ruleForm.business_license = this.datas.business_license
                        this.ruleForm.id_card = this.datas.id_card
                        this.ruleForm.id_card_reverse = this.datas.id_card_reverse

                        if (this.datas.province_id){
                            this.ruleForm.location = [this.datas.province_id+'',this.datas.city_id+'',this.datas.district_id+'']
                        }
                    }else {
                        this.$message.error(res.msg);
                    }
                })
            },
            stepBack:function(){
                this.step = 1;
            },
            backClick:function () {
                this.$router.back();
            },
            handleChange:function (value) {

                this.ruleForm.province_id = value[0];
                this.ruleForm.city_id = value[1];
                this.ruleForm.district_id = value[2];

            },
            firstConfirm:function () {
                this.$refs.ruleForm.validate((valid) => {
                    if (valid) {
                        let thsAreaCode = this.$refs.cascaderAddr    //注意2： 获取label值
                        let list = thsAreaCode.presentText.split("/")
                        this.ruleForm.province_name = list[0];
                        this.ruleForm.city_name = list[1];
                        this.ruleForm.district_name = list[2];
                        this.step = 2;
                    } else {
                        return false;
                    }
                });
                // this.step = 2;
            },
            confirmClick:function () {
                if (this.ruleForm.business_license == ""){
                    this.$message.error('请上传营业执照');
                    return;
                }else if (this.ruleForm.id_card == ""){
                    this.$message.error('请上传法人身份证');
                    return;
                }else if (this.ruleForm.id_card_reverse == ""){
                    this.$message.error('请上传法人身份证');
                    return;
                }
                this.ruleForm.id = this.datas.ID;
                this.ruleForm.province_id = Number(this.ruleForm.province_id)
                this.ruleForm.city_id = Number(this.ruleForm.city_id)
                this.ruleForm.district_id = Number(this.ruleForm.district_id)

                this.$confirm('请谨慎提交，如发现资质存在问题，会影响到正常使用', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    enterHospital(this.ruleForm).then((res)=>{
                        if (res.code == 200){
                            this.$message({
                                message: '资质提交成功',
                                type: 'success'
                            });
                            this.$router.push("/")
                        }else {
                            this.$message.error(res.msg);
                        }
                    })
                }).catch(() => {
                    // this.$message({
                    //     type: 'info',
                    //     message: '已取消删除'
                    // });
                });


            },
            handleAvatarSuccess(res, file,type) {
                console.log(this.QINIU,file)
                if (type == 1){
                    this.ruleForm.business_license = this.QINIU.qiniu_url + "/" + res.key;
                }else if (type == 2){
                    this.ruleForm.id_card = this.QINIU.qiniu_url + "/" + res.key;
                }else {
                    this.ruleForm.id_card_reverse = this.QINIU.qiniu_url + "/" + res.key;
                }

            },
            beforeAvatarUpload(file) {
                const isJPGorPNG =
                    file.type === "image/jpg" ||
                    file.type === "image/jpeg" ||
                    file.type === "image/png";
                const isLt2M = file.size / 1024 / 1024 < this.QINIU.img_size;

                if (!isJPGorPNG) {
                    this.$message({
                        type: "error",
                        message: "上传图片只能是jpg、png、jpeg格式！",
                        duration: 1500,
                    });
                    return false;
                }
                if (!isLt2M) {
                    this.$message({
                        type: "error",
                        message: '上传图片大小不能超过' + this.QINIU.img_size + 'M!',
                        duration: 1500,
                    });
                    return false;
                }
                if (isJPGorPNG && isLt2M) {
                    return getQiniu().then((res) => {
                        this.qiniuToken = {
                            token: res.data,
                        };
                    });
                }
            },
        }
    }
</script>

<style lang="scss">
  @import "@/assets/scss/login/enter.scss";
</style>
